<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap 表格</title>
    <meta charset="utf-8">
    <!-- 适应移动设备 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./css/bootstrap.css">
    <script src="./jquery-3.5.1.min.js"></script>
    <script src="./js/bootstrap.js"></script>
</head>

<body>
    <br>
    <div class="container" style="border: 1px solid red;">
        <form role="form">
            <div class="form-group">
                <label for="name">名称</label>
                <input type="text" name="name" id="name" class="form-control" placeholder="请输入名称">
            </div>
            <div class="form-group">
                <label for="inputFile">文件上传</label>
                <input type="file" name="inputFile" id="inputFile">
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox">请打勾
                </label>
            </div>
            <button type="submit" class="btn btn-default">提交</button>
        </form>
    </div>
    <br>
    <div class="container" style="border: 1px solid black;">
        <form class="form-inline" role="form">
            <div class="form-group">
                <label class="sr-only" for="name">名称</label>
                <input type="text" class="form-control" id="name" placeholder="请输入名称">
            </div>
            <div class="form-group">
                <label class="sr-only" for="inputfile">文件输入</label>
                <input type="file" id="inputfile">
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox">请打勾
                </label>
            </div>
            <button type="submit" class="btn btn-default">提交</button>
        </form>
    </div>
    <br>
    <div class="container" style="border: 1px solid gold;">
        <!-- input框 -->
        <form class="form-horizontal" role="form">
            <div class="form-group">
                <label for="username" class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="username" placeholder="请输入用户名">
                </div>
            </div>
            <div class="form-group">
                <label for="password" class="col-sm-2 control-label">密码</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="password" placeholder="请输入密码">
                </div>
            </div>
            <div class="form-group">
                <label for="t0" class="col-sm-2 control-label">datetime(没啥用)</label>
                <div class="col-sm-10">
                    <input type="datetime" name="t0" id="t0" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label for="t1" class="col-sm-2 control-label">datetime-local（很难用，点击后不会自动隐藏）</label>
                <div class="col-sm-10">
                    <input type="datetime-local" name="t1" id="t1" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label for="t2" class="col-sm-2 control-label">date</label>
                <div class="col-sm-10">
                    <input type="date" name="t2" id="t2" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label for="t3" class="col-sm-2 control-label">month</label>
                <div class="col-sm-10">
                    <input type="month" name="t3" id="t3" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label for="t4" class="col-sm-2 control-label">week</label>
                <div class="col-sm-10">
                    <input type="week" name="t4" id="t4" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label for="t5" class="col-sm-2 control-label">search和普通输入差不多</label>
                <div class="col-sm-10">
                    <input type="search" name="t5" id="t5" class="form-control">
                </div>
            </div>
            <!-- 复选框 -->
            <div class="form-group">
                <label for="hobby" class="col-sm-2 control-label">爱好</label>
                <div class="col-sm-10">
                    <label class="checkbox-inline"><input type="checkbox" name="hobby" value="">篮球</label>
                    <label class="checkbox-inline"><input type="checkbox" name="hobby" value="">足球</label>
                </div>
            </div>
            <!-- 单选框 -->
            <div class="form-group">
                <label for="gender" class="col-sm-2 control-label">性别</label>
                <div class="col-sm-10">
                    <label class="radio-inline"><input type="radio" name="gender">男</label>
                    <label class="radio-inline"><input type="radio" name="gender">女</label>
                </div>
            </div>
            <!-- 下拉选项 -->
            <div class="form-group">
                <label for="birthplace" class="col-sm-2 control-label">出生地</label>
                <div class="col-sm-10">
                    <select name="birthplace" id="birthplace" class="form-control">
                        <option value="">---请选择---</option>
                        <option value="1">北京</option>
                        <option value="2">上海</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="identify" class="col-sm-2 control-label">身份（下拉多选不好用）</label>
                <div class="col-sm-10">
                    <select name="identify" id="identify" class="form-control" multiple>
                        <option value="">---请选择---</option>
                        <option value="1">学生</option>
                        <option value="2">成年人</option>
                        <option value="3">男人</option>
                    </select>
                </div>
            </div>
            <!-- 静态控件 -->
            <div class="form-group">
                <label class="col-sm-2 control-label">Email</label>
                <div class="col-sm-10">
                    <p class="form-control-static">email@example.com</p>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-default">登录</button>
                </div>
            </div>
        </form>
    </div>

    <br>
    <div class="container" style="border: 1px solid green;">
        <form class="form-horizontal" role="form">
            <div class="form-group">
                <label class="col-sm-2 control-label">启动资金1</label>
                <div class="col-sm-10">
                    <div class="input-group">
                        <input type="text" class="form-control">
                        <span class="input-group-addon">.00</span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">启动资金2</label>
                <div class="col-sm-10">
                    <div class="input-group">
                        <span class="input-group-addon">$</span>
                        <input type="text" class="form-control">
                        <span class="input-group-addon">.00</span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">请输入关键字</label>
                <div class="col-sm-10">
                    <div class="input-group">
                        <input type="text" class="form-control">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button">Go!</button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">请输入关键字</label>
                <div class="col-sm-10">
                    <div class="input-group">
                        <input type="text" class="form-control">
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default  dropdown-toggle" data-toggle="dropdown">
                                下拉菜单 <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu pull-right">
                                <li>
                                    <a href="#">功能</a>
                                </li>
                                <li>
                                    <a href="#">另一个功能</a>
                                </li>
                                <li>
                                    <a href="#">其他</a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <a href="#">分离的链接</a>
                                </li>
                            </ul>
                        </span>
                    </div>
                </div>
            </div>
        </form>
    </div>
</body>

</html>